<template>
	<view class="classInfoContent">
		<view class="kb"></view>
		<view class="back">
			<view class="backIcon" @click="backIcon"></view>
			<view class="title">{{options.name || '视频'}}</view>
		</view>
		<scroll-view class="sView" :scroll-y="true" @scrolltolower="flash">
			<view class="videoSwiper">
				<view 
					class="list"
					v-for="(item, index) in videoList"
					@click="goPlay(item, index)"
					:key="item.id" 
					:style="{'background-image': 'url(' + item.upload_work_cover.path_text +')'  }">
					<view class="showMc"></view>
					<view class="showContent">
						<view class="title">{{item.title || '电影名称'}}</view>
						<view class="user">
							<view class="userName">
								<view class="userNameIcon" :style="{'background-image':'url(' + ((item.upload_avatar && item.upload_avatar.path_text) ? item.upload_avatar.path_text : '../../static/home/default_user.png') + ')'}"></view>
								<view class="usermz">
									{{item.user_info.nickname || '用户名'}}
								</view>
							</view>
							<view class="dzNum">
								{{item.like_count || 0}}
							</view>
						</view>
					</view>
				</view>
				
				<view class="noClass" v-if="videoList.length == 0">
					暂无视频
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {apiGetClassIconSearch} from '../../api/class.js'
	export default {
	    data() {
	        return {
				silderIndex: 0,
				videoList: [],
				tempVideoList: [],
				pageSize: 10,
				pageIndex: 1,
				options: {}
	        }
	    },
		onLoad(options) {
			var self = this
			self.options = options
			self.getSerachResult(options)
		},
	    methods: {
			backIcon() {
				uni.navigateBack({
					delta: 1
				})
			},
	        flash() {
				var self = this
				if (self.tempVideoList.length < self.pageSize) {
					return
				}
				self.pageIndex++
				self.getSerachResult(self.options)
		    },
			
			//搜索1
			getSerachResult(options) {
				var self = this
				apiGetClassIconSearch({
					tag_name: options.name,
					page: self.pageIndex,
					page_size: self.pageSize
				}).then(r => {
					self.tempVideoList = r.data.data
					self.videoList = self.videoList.concat(r.data.data)
				})
			},
			
			// go
			goPlay(item, index) {
				var self = this
				let data = {
					videoType:'classSearch',
					page: parseInt((index + this.pageSize) / this.pageSize),
					pageSize:this.pageSize,
					videoIndex: (this.pageIndex - 1) * this.pageSize + index,
					params: JSON.stringify({tag_name: self.options.name})
				}
				this.$navTo.togo('/pages/glob/video/index',data)
			}
	    }
	}
</script>

<style lang="scss" scoped>
	.classInfoContent {
		width: 93.6%;
		margin-left: 3.2%;
		position: relative;
		.back {
			width: 93.6%;
			position: fixed;
			top: 30rpx;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999999;
			color: #DDDBFB;
			.backIcon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100%;
				background-size: 40rpx;
				left: 0;
				background-position:left center;
				background-image: url(../glob/user/img/backIcon.png);
				background-repeat: no-repeat;
				position: absolute;
			}
			.title {
				width: 82%;
				height: 40rpx;
				line-height: 40rpx;
				color: #DDDBFB;
				font-size: 36rpx;
				text-align: center;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
		}
		
		.sView {
			width: 93.6%;
			position: fixed;
			top: 160rpx;
			height: 91vh;
			overflow-y: auto;
		}
		.videoSwiper {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
			.list {
				width: 47%;
				height: 600rpx;
				margin-bottom: 20rpx;
				background-size: cover;
				background-repeat: no-repeat;
				position: relative;
				
				.showMc {
					position: absolute;
					z-index: 99;
					background-color: #0C0B18;
					width: 100%;
					height: 184rpx;
					opacity: 0.3;
					bottom: 0;
				}
				.showContent {
					position: absolute;
					z-index: 100;
					width: 100%;
					height: 184rpx;
					bottom: 0;
					
					.title {
						font-size: 28rpx;
						width: 90%;
						height: 70rpx;
						margin-left: 5%;
						margin-top: 16rpx;
						overflow: hidden;
						line-height: 1.3;
					}
					
					.user {
						width: 90%;
						margin-left: 5%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 24rpx;
						font-size: 24rpx;
						height: 42rpx;
						.userName {
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
						.usermz {
							width: 160rpx;
						}
						.userNameIcon {
							width: 42rpx;
							height: 42rpx;
							border-radius: 50%;
							background-size: cover;
							background-image: url(../../static/home/default_user.png);
							background-position: left center;
							background-repeat: no-repeat;
						}
						
						.dzNum {
							width: 100rpx;
							height: 42rpx;
							border-radius: 50%;
							background-image: url(../glob/user/icon/xh.png);
							background-size: 28rpx 25rpx;
							background-position: 4px center;
							background-repeat: no-repeat;
							padding-left: 42rpx;
							line-height: 42rpx;
						}
					}
				}
			}
		}
		
		.noClass {
			margin-top: 150rpx;
			width: 100%;
			text-align: center;
		}
	}
</style>
